<script lang="ts" setup name="takeoutOrderEdit">
import { getOrderDetailAPI } from "@/api/modules/takeout";
import LaiHeader from "@/components/lai-header/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { color } from "echarts";
import { onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Takeout } from "@/api/interface";
const router = useRouter();
const route = useRoute();
const documentStatus = ref(true);
const formData = ref<Takeout.TakeoutEdit>({
  foodData: []
});

const getOrderDetail = async () => {
  const res = await getOrderDetailAPI({ orderId: route.query.orderId });
  formData.value = res.data;
  console.log(res);
};

onMounted(() => {
  if (route.query.orderId) {
    documentStatus.value = true;
    getOrderDetail();
  } else {
    documentStatus.value = false;
  }
});

const goBack = () => {
  router.back();
};
</script>

<template>
  <div class="container">
    <LaiHeader title="单据明细" is-show-back is-show-button @go-back="goBack" :height="70"></LaiHeader>
    <div class="main">
      <el-form ref="form" label-width="100px" label-suffix="：">
        <el-row :gutter="10">
          <el-col :span="7">
            <el-form-item label="餐台">
              <el-input v-model="formData!.deskName" :disabled="documentStatus"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="交易流水号">
              <el-input v-model="formData!.orderNo" :disabled="documentStatus"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="人數">
              <el-input v-model="formData!.number" :disabled="documentStatus"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <!-- <el-col :span="7">
            <el-form-item label="收银员">
              <el-input v-model="documentStatus" :disabled="documentStatus"></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="7">
            <el-form-item label="开台时间">
              <el-input v-model="formData!.orderDate" :disabled="documentStatus"></el-input>
            </el-form-item>
          </el-col> -->

          <el-col :span="7">
            <el-form-item label="结账时间">
              <el-input v-model="formData!.orderDate" :disabled="documentStatus"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="table">
        <el-table :data="formData!.foodData" height="400px" style="width: 85%" border>
          <el-table-column prop="prop" label="行号" width="80">
            <template #default="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="foodName" label="商品名称" width="200"> </el-table-column>
          <el-table-column prop="specName" label="规格名称" width="width"> </el-table-column>
          <el-table-column prop="price" label="单价" width="120"> </el-table-column>
          <el-table-column prop="quantity" label="数量" width="130"> </el-table-column>
          <el-table-column prop="amount" label="金额" width="width"> </el-table-column>
          <el-table-column prop="feedAmount" label="加料加价" width="width"> </el-table-column>
          <el-table-column prop="reduceAmount" label="优惠金额" width="width"> </el-table-column>
          <el-table-column prop="taskTitle" label="做法" width="width"> </el-table-column>
          <el-table-column prop="feedTitle" label="加料" width="width"> </el-table-column>
        </el-table>
      </div>

      <div style="width: 85%; margin-left: 20px">
        <div class="border">
          <el-divider content-position="left">费用区</el-divider>

          <div class="content">
            <div>
              <el-row style="margin-left: 80px" :gutter="10">
                <el-col :span="6">
                  <span>原金额：{{ formData!.sumAmount }}</span>
                </el-col>
                <el-col :span="6">
                  <span>订单金额：{{ formData!.sumReduceAmount }}</span>
                </el-col>
                <el-col :span="6">
                  <span>实付金额：{{ formData.sumAllAmount }}</span>
                </el-col>
                <el-col :span="6">
                  <span>支付方式：{{ formData!.paymentName || "暂无" }}</span>
                </el-col>
              </el-row>
              <!-- <el-row style="margin-top: 10px; margin-left: 80px" :gutter="10">
                <el-col :span="6">
                  <span>折扣金额：26.90</span>
                </el-col>
                <el-col :span="6">
                  <span>赠送金额：26.90</span>
                </el-col>
                <el-col :span="6">
                  <span>总优惠 金额：26.90</span>
                </el-col>
                <el-col :span="6">
                  <span>应收金额：26.90</span>
                </el-col>
              </el-row> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100%;
  overflow: hidden;
  .main {
    height: calc(100% - 80px);
    padding: 20px;
    background-color: #ffffff;
    .table {
      height: 400px;
      margin-top: 20px;
      margin-left: 20px;
      overflow-y: auto;
    }
  }
  .border {
    height: 70px;
    border: 1px solid #dcdfe6;
    border-top: none;
    .content {
      padding: 0 20px;
      color: #575961;
    }
  }

  // background-color: #ffffff;
}
</style>
